<template>
  <view class="w100p common_wrap no-bg">
    <CommonHeader :title="$t('翻译身份认证')"></CommonHeader>

    <view class="w100p pr list_block">
      <scroll-view scroll-y>
        <view class="box-same upload-wrapper">
          <view class="inp-li">
            <view class="title">{{$t('用户昵称')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :placeholder="$t('请输入用户昵称')" placeholder-class="input-placeholder-cai"
                v-model="paramsSubmit.name" maxlength="60"/>
            </view>
          </view>
          <view class="upload-li">
            <view class="title">{{$t('用户头像')}}<text class="require">*</text><text class="yaoqiu">（{{$t('支持')}}jpeg、jpg、png (大小3m内)）</text>
            </view>
            <view class="uploads">
              <view class="img" v-for="(item, index) in avatarList" :key="index" @click="onPreview(item.fullurl)">
                <image :src="item.fullurl" mode="aspectFill" />
                <view class="delete" @click.stop="onDeletePic(index, 'avatarList')">
                  <view class="lien"></view>
                </view>
              </view>
              <view class="img" v-if="avatarList.length < 1"
                @click="onUpload({ type: 'image', size: 3, count: 1 }, 'avatar')">
                <image src="/static/caigou/camera.png" />
              </view>
            </view>
          </view>
          <view class="inp-li">
            <view class="title">{{$t('所在地')}}<text>*</text></view>
            <city @change="onCHangeHotArea" :value="fullBeginAddressKeyArea">
              <view class="inp">
                <view :class="{ txt: true, 'active': fullBeginAddressArea }">{{ fullBeginAddressArea || $t('请选择所在地') }}
                </view>
                <view class="aroow">
                  <image src="/static/caigou/xiala.png" />
                </view>
              </view>
            </city>

          </view>
          <!-- <view class="inp-li">
            <view class="title">{{$t('手机号')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :placeholder="$t('请输入手机号')" placeholder-class="input-placeholder-cai"
                v-model="paramsSubmit.phone" disabled/>
            </view>
          </view> -->
        </view>
        <!-- 采购简介 -->
        <view class="box-same caigou-jianjie">
          <view class="title">{{$t('资源和能力')}}<text class="require">*</text> <text class="sub">（{{$t('会显示给用户查看，请认真填写')}}）</text></view>
          <view class="textarea">
            <textarea placeholder="" placeholder-class="input-placeholder-cai"
              v-model="paramsSubmit.content"></textarea>
          </view>
        </view>
        <!-- 能力 -->
        <view class="box-same">
          <view class="inp-li">
            <view class="title">{{$t('语言能力')}}<text>*</text><text class="sub">（{{$t('可多选')}}）</text></view>
            <view class="select-mutil">
              <view :class="{ selecli: true, active: item.select }" v-for="(item, index) in lagugeList" :key="index"
                @click="onLanguge(item)">
                {{ item.title }}
              </view>
            </view>
          </view>
          <view class="inp-li">
            <view class="title">{{$t('专业范围')}}<text>*</text><text class="sub">（{{$t('可多选')}}）</text></view>
            <view class="select-mutil">
              <view :class="{ selecli: true, active: item.select }" v-for="(item, index) in jobList" :key="index"
                @click="onZhuanye(item)">
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
     

        <view class="box-same">
          <view class="inp-li" @click="onTapShoufei">
            <view class="title">{{$t('收费标准')}}<text>*</text><text class="sub">（{{$t('积分')}}/分钟）</text></view>
            <view class="inp">
              <view :class="{ txt: true, 'active': paramsSubmit.intention_score }">{{ paramsSubmit.intention_score || $t('请选择收费标准') }}
              </view>
              <view class="aroow">
                <image src="/static/caigou/xiala.png" />
              </view>
            </view>
          </view>
          <view class="inp-li">
            <view class="title">{{$t('熟悉的城市')}}<text>*</text></view>
            <city @change="onCHangeHot" :value="fullBeginAddressKey" >
              <view class="inp">
                <view :class="{ txt: true, 'active': false }">{{ $t('选择') }} </view>
                <view class="aroow">
                  <image src="/static/caigou/xiala.png" />
                </view>
              </view>

            </city>
            <!-- 城市多选框 -->
            <view class="city-lists">
              <view class="city" v-for="(item, index) in addressList" :key="index">
                <text>{{ item.label }}</text>
                <image src="/static/caigou/delete.png" class="delete" @click.stop="onDelete(index)"></image>
              </view>
            </view>
          </view>

       
        </view>
        <view style="height: 16rpx;"></view>


      </scroll-view>
    </view>

    <!-- 取消 -->
    <view class="btn-wrap" @click="submit">
      <view class="btn green">{{$t('提交认证')}}</view>
    </view>





    <!-- 积分 -->
    <view v-if="isJifen">

      <u-popup :show="isJifen" @close="onClose" round="34">
        <view class="pop-wrapper">
          <view class="headerxx">
            <image src="/static/caigou/chacha.png" @click="onClose" />
          </view>
          <view class="scroll-w">
            <scroll-view scroll-y>
              <view class="lists">
                <view :class="{ list: true, 'active': index == currentIndexJifen }" v-for="(item, index) in jifenList"
                  :key="index" @click="onChangeTapJifen(index, item)">
                  {{ item.label }}
                </view>
              </view>
            </scroll-view>
          </view>

          <view class="btn" @click="confirmJifen">{{$t('确定')}}</view>
        </view>
      </u-popup>
    </view>



  </view>
</template>


<script>
import CommonHeader from "@/pages/translate/components/common-header.vue";
import { state_save,state_find } from '@/api/state.js';
import { crontab_cate } from '@/api/basic.js';
import {getUserHomepage} from '@/api/app.js';
import { uploadFile, chooseFile } from '@/utils/tool.js';


export default {
  components: {
    CommonHeader
  },
  data() {
    return {
      jifenList: [{
        value: '1',
        label: '100'
      },
      {
        value: '2',
        label: '200'
      }, {
        value: '3',
        label: '300'
      }, {
        value: '4',
        label: '400'
      }],
      isJifen: false,

      currentIndexJifen: 0, // 积分索引
      currentItemJifen: {}, // 发布类型

      // 语言能力
      lagugeList: [{
        title: this.$t('中文'),
        select: false,
      }, {
        title: this.$t('俄语'),
      }, {
        title: this.$t('英语'),
      }],
      jobList: [],
      fullBeginAddressKey: '',
      addressList: [],
      fullBeginAddressArea: '',
      fullBeginAddressKeyArea: '',

      paramsSubmit: {
        user_id: uni.getStorageSync('user_id'),
        name: '',
        content: '',
        phone: '',
        city_id: '',
        know_city_id: '',
        professional_ids: '',
        intention_score: '',
        lang: '',
        avatar: '',
      },
      is_renzheng: '',
      avatarList: [], // 公司logo
      // 
    }
  },
  onLoad(options) {
    this.getData();
    this.is_renzheng = options.is_renzheng;
   
  },
  methods: {
        // 删除图片
    onDeletePic(index, arr) {
      this[arr].splice(index, 1)
      this.$forceUpdate();
    },
    // 上传视频和图片
    async onUpload({ type, size, count }, keyx) {
      let res = await uploadFile(await chooseFile({
        type,
        size,
        count,
      }))
      if (type == 'image') {
        switch (keyx) {
          case 'avatar':
            this.avatarList = [res];
            break;

        }
      }
      if (type == 'video') {
        this.videoList = [res];
      }

    },
    onPreview(current) {
      uni.previewImage({
        current,
        urls: [current]
      })
    },

    onDelete(index) {
      this.addressList.splice(index,1)
    },
    getDetail() {
      
      getUserHomepage({
        user_id: uni.getStorageSync('user_id'),
      }).then((res) => {
        let info = res.data.data.userInfo?.user_staff;
        console.log(info,'infoinfoinfoinfoinfo')
        // 回显
        this.paramsSubmit.name = info.name;
        this.paramsSubmit.content = info.content;
        // this.paramsSubmit.phone = info.phone;
        this.paramsSubmit.professional_ids = info.professional_ids;
        this.paramsSubmit.intention_score = info.intention_score;
        // 头像
        if (info.avatar) {
          this.paramsSubmit.avatar = this.getImageUrl(info.avatar);
          this.avatarList = [{
            url: this.getImageUrl(info.avatar),
            fullurl: this.getImageUrl(info.avatar),
          }]
        }
        // 工作类型
        let arr =  info.professional_ids.split(',');
        this.jobList.map((ele)=> {
          if (arr.indexOf(String(ele.id)) > -1) {
            ele.select = true;
          }
          return ele;
        })

        // 语言能力
        let laArr =  info.request_lang.split(',');
        this.lagugeList.map((ele)=> {
          if (laArr.indexOf(ele.title) > -1) {
            ele.select = true;
          }
          return ele;
        })

        // 所在地区
        this.fullBeginAddressKeyArea = info.city_id;
        this.fullBeginAddressArea = info.city.shortname;
        this.paramsSubmit.city_id = info.city_id;

        // 熟悉城市
        this.fullBeginAddressKey = info.know_city_id
        info.know_city.forEach((ele)=> {
          this.addressList.push({
            label: ele.name,
            value: ele.id,
          })
        })
        console.log(this.addressList,'this.addressListthis.addressList')

      })
    },  
    getData() {
      crontab_cate({
        type: 'professional',
      }).then((res) => {
        this.jobList = res.data.data.data;
         // 获取认证详情
          // if (+this.is_renzheng) {
            this.getDetail();
          // }
      })
    },
    onLanguge(item) {
      item.select = !item.select;
      this.$forceUpdate();
    },
    onZhuanye(item) {
      item.select = !item.select;
      this.$forceUpdate();
    },
    onTapShoufei() {
      console.log('成功')
      this.isJifen = true
    },
    onCHangeHotArea(e) {
      this.fullBeginAddressKeyArea = e.column3.value;
      this.fullBeginAddressArea = e.column3.label;
      this.paramsSubmit.city_id = e.column3.value;
    },
    onCHangeHot(e) {
      this.fullBeginAddressKey = e.column3.value;
      let addressList = this.addressList;
      let idx = addressList.findIndex((ele)=> {
        return ele.value == e.column3.value;
      })
      console.log(idx,'idxidxidxidxidx')
      if (idx <= -1) {
        this.addressList.push(e.column3)
      }
    },
    onChangeTapJifen(index, item) {
      this.currentIndexJifen = index;
    },
    onClose() {
      this.isJifen = false
    },
    confirmJifen() {
      this.isJifen = false;
      this.currentItemJifen = this.jifenList[this.currentIndexJifen]
      this.paramsSubmit.intention_score = this.currentItemJifen.label;

    },
    async submit() {
      if (!this.paramsSubmit.name) {
        uni.showToast({
          title: this.$t('请输入姓名'),
          icon: 'none',
        })
        return;
      }
      if (!this.avatarList.length) {
        uni.showToast({
          title: this.$t('请上传头像'),
          icon: 'none',
        })
        return;
      }
      if (!this.paramsSubmit.city_id) {
        uni.showToast({
          title: this.$t('请选择所在地'),
          icon: 'none',
        })
        return;
      }
      // if (!this.paramsSubmit.phone) {
      //   uni.showToast({
      //     title: this.$t('请输入手机号'),
      //     icon: 'none',
      //   })
      //   return;
      // }
      // if (this.paramsSubmit.phone.length < 10) {
      //   uni.showToast({
      //     title: '手机号格式不对',
      //     icon: 'none',
      //   })
      //   return;
      // }

      let lagugeList = this.lagugeList;
      let arrLangu = []
      lagugeList.map((ele) => {
        if (ele.select) {
          arrLangu.push(ele.title);
        }
      })
      if (!arrLangu.length) {
        uni.showToast({
          title: this.$t('请选择语言能力'),
          icon: 'none',
        })
        return;
      }

      let jobList = this.jobList;
      let jobIds = [];
      jobList.map((ele) => {
        if (ele.select) {
          jobIds.push(ele.id);
        }
      })
      console.log(jobIds, 'jobIdsjobIds')
      if (!jobIds.length) {
        uni.showToast({
          title: this.$t('请选择专业范围'),
          icon: 'none',
        })
        return;
      }

      if (!this.paramsSubmit.intention_score) {
        uni.showToast({
          title: this.$t('请选择收费标准'),
          icon: 'none',
        })
        return;
      }
      if (!this.addressList.length) {
        uni.showToast({
          title: this.$t('请选择熟悉的城市'),
          icon: 'none',
        })
        return;
      }
      if (!this.paramsSubmit.content) {
        uni.showToast({
          title: this.$t('请输入资源和能力'),
          icon: 'none',
        })
        return;
      }

      let cityHots = [];
      this.addressList.forEach((ele) => {
        cityHots.push(ele.value)
      })

        // 公司logo
        let avatarImg = [];
        this.avatarList.forEach((ele) => {
          avatarImg.push(ele.fullurl)
        })

      uni.showLoading({ title: 'loading...',mask:true,})
      try {
        let res = await state_save({
          ...this.paramsSubmit,
          professional_ids: jobIds.join(','),
          lang: arrLangu.join(','),
          know_city_id: cityHots.join(','),
          avatar: avatarImg.join(','),
        })
        if (res.data.code == 200) {
          this.isMessageGo({
						action: 'upDateUser',
						data: {
							name: this.paramsSubmit.name,
							avatar: this.getImageUrl(avatarImg.join(','))
						}
					})
          uni.showToast({
            title: this.$t('提交成功'),
          })
          setTimeout(() => {
            uni.hideLoading({})
            uni.redirectTo({
              url: '/pages/translate/success/index',
            })
          }, 700);
        } else {
          uni.hideLoading({})

        }

      } catch (error) {
        uni.hideLoading({})
      }



    }
  },
}

</script>



<style lang="scss" scoped>
@import '@/pages/translate/common/common.scss';
@import './index.scss';
</style>


<style>
.input-placeholder-cai {
  color: #606366;
  font-size: 26rpx;
}
</style>